@using WebUI.Shared.Sidebar

<aside class="is-light is-radius">
  <div class="sidearea">
    <label class="subtitle is-5" for="pricerange">
      Highest Price:<span> @SideBar.PriceRange</span>
    </label>

    <input
      class="slider"
      id="pricerange"
      type="range"
      value="@SideBar.PriceRange.ToString()"
      min="@SideBar.Min"
      max="@SideBar.Max"
      step="1"
      onchange=@Search
      />

    <span class="min is-pulled-left">$@SideBar.Min</span>
    <span class="max is-pulled-right">$@SideBar.Max</span>
  </div>

  <div class="sidearea">
    <h4 class="subtitle is-5">Contact Us</h4>
    <p>Questions? Call us at 1-888-555-SHOP, we're happy to be of service.</p>
  </div>
</aside>

@functions {

  [Parameter]
  SideBarViewModel SideBar { get; set; } = new SideBarViewModel();

  [Parameter]
  Action<long> OnSliderChanged { get; set; }

  async Task Search(UIChangeEventArgs @event)
  {
    var price = Convert.ToInt64(@event.Value);
    SideBar.PriceRange = price;

    OnSliderChanged?.Invoke(price);
    await Task.CompletedTask;
  }

}
